<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实用标签</title>
</head>

<body>
    <h1>实用标签</h1>
    <h2>details和summary</h2>
    <details>
        <summary>点击展开更多内容</summary>
        <p>这里是隐藏的内容，点击上面的summary可以展开和收起。</p>
    </details>

    <h2>progress和meter</h2>
    <p>
        <label for="file">下载进度：
            <progress id="file" value="70" max="100">70%</progress></label>
    </p>
    <p>
        <label>磁盘使用量：
            <meter value="0.6">60%</meter></label>
    </p>

    <h2>output</h2>
    <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
        <input type="range" id="a" value="50" /> +
        <input type="number" id="b" value="50" /> =
        <output name="result" for="a b">100</output>
    </form>

    <h2>ruby、rp、rt</h2>
    <ruby>
        基<rp>(</rp><rt>ji</rt><rp>)</rp>础文本<rp>(</rp><rt>注音</rt><rp>)</rp>
    </ruby>
</body>

</html>